<template>
  <div class="import-sfc-order">
    <el-dialog
      v-el-drag-dialog="{ drag: true, full: false, resize: false }"
      :visible="true"
      :close-on-click-modal="false"
      @close="closeMd"
      :title="`导入顺风车订单`"
      width="450px">
      <el-form :model="fm.ps" :ref="fm.fname"
        @keyup.enter.native="onSubmit" :label-width="'100px'">
        <el-form-item label="导入文件" required>
          <el-upload
            ref="exUpload"
            :action="uploadAction"
            :headers="headers"
	          :data="data"
            name="freeOrdersFile"
            accept=".xls,.xlsx"
            :multiple="false"
            :limit="1"
            :auto-upload="false"
            :file-list="fm.files"
            :on-change="onUploadFile"
            :on-success="importOrderSuccess">
            <div>
              <el-button size="small" type="primary">点击上传</el-button>
              <span class="c-yellow">（只能上传.xls/.xlsx的Excel文件）</span>
            </div>
            <div slot="tip" class="c-red">{{errMsg}}</div>
          </el-upload>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button 
          type="primary" 
          :icon="'el-icon-qimport'" 
          @click="onSubmit" 
          :loading="fm.sb.load">
          确认导入
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog';

import {getTokenKey, getToken} from '@/utils/auth';
import * as request from "@/utils/request";

export default {
  name: 'ImportSfcOrder',
  directives: { elDragDialog },
  data() {
    return {
      fm: {// 表单数据对象
        fname: "importSfcOrderFm",
        sb: { load: false },
        // 上传文件数组
        files: [],
        // 参数对象
        ps: {},
        // 上传文件错误提示
        errMsg: '',
      },
    }
  },
  created() {
    const that = this;
    
  },
  computed: {
    // 上传请求头信息
    headers: function(){
      let defhead = {};
      defhead[getTokenKey()] = getToken();
      return defhead;
    },
    // 上传文件地址
    uploadAction: function(){
      return `${request.default.defaults.baseURL}/travel/importTravelOrder`;
    },
    // 上传的参数对象
    data: function(){
      return {};
    },
    // 操作错误信息
    errMsg: function(){
      return this.fm.errMsg;
    },
  },
  methods:{
    closeMd() {
      this.$emit("myClick", {state: false});
    },
    // 覆盖默认上传行为
    onUploadFile(file, fileList){
      // 验证文件数量，替换后仅保留第一个文件
      if (fileList.length > 1) fileList.splice(0, 1);
      this.fm.files = fileList;
    },
    // 提交表单
    onSubmit() {
      let that = this, U = that.U, fm = that.fm, sb = fm.sb;

      that.$refs[fm.fname].validate((valid) => {
        if (!valid) { return false; } else {
          if(fm.files.length == 0){
            U.qerror('请选择导入的Excel文件');
          }else{
            sb.load = true;

            // 验证-上传文件
            that.$refs.exUpload.submit();
          }

          setTimeout(() => { sb.load = false; }, 10000);
        }
      });
    },
    // 导入订单成功
    importOrderSuccess(res, file, fileList){
      let that = this, U = that.U;
      that.fm.errMsg = '', that.fm.sb.load = false;

      if(res.code != 1){
        that.fm.errMsg = res.msg;

        // 移除文件列表
        that.$refs.exUpload.clearFiles();
      }else{
        that.fm.errMsg = res.msg;

        // 关闭导入订单弹框，打开导入订单列表弹框
        that.$emit("myClick", {state: false, openListMd: true});
      }
    },
    
  },
 }
</script>